<template>
  <div class="about">
    <h2 class="title">购物车</h2>
	<div class="list">
		
		<ul  v-for="item in shoppingcartList" :key="item.id">
			<li>
				<div class="piture">
					<img :src="item.src" />
				</div>
				<div class="info">
					<p class="name">{{item.title}}×{{item.num}}</span></p>
					<p class="price">￥{{item.price}}</p>
					<button class="btn" @click="del(item)">删除</button>
				</div>
			</li>
		</ul>
		<div class="a">
			商品总价：￥{{sum}}
		</div>
	</div>
	<Tabbar></Tabbar>
  </div>
</template>
<script>
// @ is an alias to /src
import Tabbar from '@/components/Tabbar.vue'
import { mapState,mapGetters} from 'vuex'
export default {
  name: 'goodsList',
  components: {
    Tabbar,
  },
  computed:{
  	...mapState({
  	shoppingcartList:'shoppingcartList',
  		}),
	
	...mapGetters({
			sum:'totalPrice'
	})
  	},
	methods:{
		del(item){
			 this.$store.commit('del',item);
		}
	}
}
</script>
